<template>
	<view class="dynamicModel-list-v">
		<view class="certificate-img">
			<view class="left-text">
				<h1>矿山特种作业证书</h1>
				<p>点击图片放大查看</p>
			</view>
			<u-image width="120rpx" height="120rpx" class="m-images" :src="list.specialimage" mode=""></u-image>
		</view>
		<view class="list-warp">
			<view class="list">
				<view class="list-box">
					<view class="item">
						<view class="item-cell u-line-1">
							<text>特种证书名称：</text>
							<text>{{list.specialworkname}}</text>
						</view>
						<view class="item-cell u-line-1">
							<text>所在车间：</text>
							<text>{{list.workshop}}</text>
						</view>
						<view class="item-cell u-line-1">
							<text>证书持有人：</text>
							<text>{{list.specialpeoplename}}</text>
						</view>
						<view class="item-cell u-line-1">
							<text>所在班组：</text>
							<text>{{list.workteam}}</text>
						</view>
						<view class="item-cell u-line-1">
							<text>工种：</text>
							<text>{{list.worktype}}</text>
						</view>
						<view class="item-cell u-line-1">
							<text>专业工龄：</text>
							<text>{{list.specialworktime}}</text>
						</view>
						<view class="item-cell u-line-1">
							<text>证书编号：</text>
							<text>{{list.specialworknum}}</text>
						</view>
						<view class="item-cell u-line-1">
							<text>发证日期：</text>
							<text>{{list.specialissuedate}}</text>
						</view>
						<view class="item-cell u-line-1">
							<text>发证机关：</text>
							<text>{{list.specialissuegroup}}</text>
						</view>
						<view class="item-cell u-line-1">
							<text>培训时间：</text>
							<text>{{list.studytime}}</text>
						</view>
						<view class="item-cell u-line-1">
							<text>一次复审：</text>
							<text>{{list.onetrial}}</text>
						</view>
						<view class="item-cell u-line-1">
							<text>二次复审：</text>
							<text>{{list.twotrial}}</text>
						</view>
						<view class="item-cell u-line-1">
							<text>有效期：</text>
							<text>{{list.validitytime}}</text>
						</view>
						<view class="item-cell u-line-1">
							<text>延期时间：</text>
							<text>{{list.delaytime}}</text>
						</view>
						<view class="item-cell u-line-1">
							<text>延长时间：</text>
							<text>{{list.extendtime}}</text>
						</view>
					</view>
				</view>
				<view class="people-histroy">
					<view class="tabs-box">
						<u-tabs :list="courseTabs" :is-scroll="false" :current="current" @change="change"></u-tabs>
					</view>
					<view class="accident"  v-show="!this.current">
						<view class="ac-item" >
							<p>{{list.mt_safe_accident_listList[0].accidentcontent}}</p>
							<p class="time">{{list.mt_safe_accident_listList[0].accidenttime}}</p>
						</view>
					</view>
					<view class="illegal"  v-show="this.current">
						<view class="ac-item" >
							
							<p>{{list.mt_safe_violation_listList[0].violationcontent}}</p>
							<p class="time">{{list.mt_safe_violation_listList[0].violationtime}}</p>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import resources from '@/libs/resources.js'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		getDictionaryDataSelector,
		getDataInterfaceRes
	} from '@/api/common'
	import request from '@/utils/request'
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				courseTabs: [{
					name: '事故责任记录'
				}, {
					name: '违法违章记录'
				}],
				current: 0,
				//事故记录
				accList:[
					{
						accidenttime:"2021年3月4日15时21分",
						accidentcontent:"某某因工作操作不当造成企业设备宕机两小时；故通报批评记录在案。"
					},
					{
						accidenttime:"2021年3月4日15时21分",
						accidentcontent:"某某因工作操作不当造成企业设备宕机两小时；故通报批评记录在案。"
					},
				],
				illegalList:[
					{
						violationcontent:"111某某因工作操作不当造成企业设备宕机两小时；故通报批评记录在案。",
						violationtime:"2021年3月4日15时21分"
					},
					{
						violationcontent:"1111某某因工作操作不当造成企业设备宕机两小时；故通报批评记录在案。",
						violationtime:"2021年3月4日15时21分"
					},
				],
				sortValue: '',
				searchForm: {
					specialworkname: undefined,
					workshop: undefined,
					specialpeoplename: undefined,
					workteam: undefined,
					worktype: undefined,
					specialworktime: undefined,
					specialworknum: undefined,
					specialissuedate: undefined,
					specialissuegroup: undefined,
					studytime: undefined,
					onetrial: undefined,
					twotrial: undefined,
					validitytime: undefined,
					delaytime: undefined,
					extendtime: undefined,
				},
				downOption: {
					use: true,
					auto: false
				},
				upOption: {
					page: {
						num: 0,
						size: 20,
						time: null,
					},
					empty: {
						use: true,
						icon: resources.message.nodata,
						tip: "暂无数据",
						fixed: true,
						top: "300rpx",
						zIndex: 5,
					},
					textNoMore: '没有更多数据',
					toTop: {
						bottom: 250
					}
				},
				list: [
						{
							specialworkname: "矿机数控特种作业证书",
							worktype: "矿山工人",
							validitytime: "2024-10-09",
							specialWorkTime: "8年",
							specialImage: "/static/image/learnapp/video_fm@2x.png",
							workshop:"一车间",
							specialpeoplename:"赵大锤"
						},
				 ],
				 meetingImages:[
				 	"/static/image/learnapp/video_fm@2x.png",
				 ],
				listQuery: {
					sort: 'desc',
					sidx: '',
					keyword: '',
					json: ''
				},
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}, ],
				sortOptions: [{
						label: '特种证书名称降序',
						sidx: 'specialworkname',
						value: 'specialworknamedesc',
						sort: 'desc'
					},
					{
						label: '特种证书名称升序',
						sidx: 'specialworkname',
						value: 'specialworknameasc',
						sort: 'asc'
					},
					{
						label: '所在车间降序',
						sidx: 'workshop',
						value: 'workshopdesc',
						sort: 'desc'
					},
					{
						label: '所在车间升序',
						sidx: 'workshop',
						value: 'workshopasc',
						sort: 'asc'
					},
					{
						label: '证书持有人降序',
						sidx: 'specialpeoplename',
						value: 'specialpeoplenamedesc',
						sort: 'desc'
					},
					{
						label: '证书持有人升序',
						sidx: 'specialpeoplename',
						value: 'specialpeoplenameasc',
						sort: 'asc'
					},
					{
						label: '所在班组降序',
						sidx: 'workteam',
						value: 'workteamdesc',
						sort: 'desc'
					},
					{
						label: '所在班组升序',
						sidx: 'workteam',
						value: 'workteamasc',
						sort: 'asc'
					},
					{
						label: '工种降序',
						sidx: 'worktype',
						value: 'worktypedesc',
						sort: 'desc'
					},
					{
						label: '工种升序',
						sidx: 'worktype',
						value: 'worktypeasc',
						sort: 'asc'
					},
					{
						label: '专业工龄降序',
						sidx: 'specialworktime',
						value: 'specialworktimedesc',
						sort: 'desc'
					},
					{
						label: '专业工龄升序',
						sidx: 'specialworktime',
						value: 'specialworktimeasc',
						sort: 'asc'
					},
					{
						label: '证书编号降序',
						sidx: 'specialworknum',
						value: 'specialworknumdesc',
						sort: 'desc'
					},
					{
						label: '证书编号升序',
						sidx: 'specialworknum',
						value: 'specialworknumasc',
						sort: 'asc'
					},
					{
						label: '发证日期降序',
						sidx: 'specialissuedate',
						value: 'specialissuedatedesc',
						sort: 'desc'
					},
					{
						label: '发证日期升序',
						sidx: 'specialissuedate',
						value: 'specialissuedateasc',
						sort: 'asc'
					},
					{
						label: '发证机关降序',
						sidx: 'specialissuegroup',
						value: 'specialissuegroupdesc',
						sort: 'desc'
					},
					{
						label: '发证机关升序',
						sidx: 'specialissuegroup',
						value: 'specialissuegroupasc',
						sort: 'asc'
					},
					{
						label: '培训时间降序',
						sidx: 'studytime',
						value: 'studytimedesc',
						sort: 'desc'
					},
					{
						label: '培训时间升序',
						sidx: 'studytime',
						value: 'studytimeasc',
						sort: 'asc'
					},
					{
						label: '一次复审降序',
						sidx: 'onetrial',
						value: 'onetrialdesc',
						sort: 'desc'
					},
					{
						label: '一次复审升序',
						sidx: 'onetrial',
						value: 'onetrialasc',
						sort: 'asc'
					},
					{
						label: '二次复审降序',
						sidx: 'twotrial',
						value: 'twotrialdesc',
						sort: 'desc'
					},
					{
						label: '二次复审升序',
						sidx: 'twotrial',
						value: 'twotrialasc',
						sort: 'asc'
					},
					{
						label: '有效期降序',
						sidx: 'validitytime',
						value: 'validitytimedesc',
						sort: 'desc'
					},
					{
						label: '有效期升序',
						sidx: 'validitytime',
						value: 'validitytimeasc',
						sort: 'asc'
					},
					{
						label: '延期时间降序',
						sidx: 'delaytime',
						value: 'delaytimedesc',
						sort: 'desc'
					},
					{
						label: '延期时间升序',
						sidx: 'delaytime',
						value: 'delaytimeasc',
						sort: 'asc'
					},
					{
						label: '延长时间降序',
						sidx: 'extendtime',
						value: 'extendtimedesc',
						sort: 'desc'
					},
					{
						label: '延长时间升序',
						sidx: 'extendtime',
						value: 'extendtimeasc',
						sort: 'asc'
					},
				],
				menuId: '',
				listid:''
			}
		},
		onLoad(e) {
			this.listid=e.id
			this.menuId = e.menuId
			uni.$on('refresh', () => {
				this.list = [];
				this.mescroll.resetUpScroll();
			})
			this.dataAll()
			this.upCallback()
		},
		onUnload() {
			uni.$off('refresh')
		},
		methods: {
			change(index) {
				this.current = index;
				console.log(this.current)
			},
			//点击证书图片放大
			imgPreview(){
				uni.previewImage({
					indicator:"number",
					loop:true,
					urls: this.meetingImages
				})
			},

			dataAll() {},
			closeData(e) {
				if (e == 1) {
					// this.reset()
				}
			},
			upCallback(page) {
				//             for(let i in this.searchForm){
				// 	if(!this.searchForm[i]){
				// 		delete this.searchForm[i]
				// 	}
		
				request({
					url: '/api/example/Mt_safe_special_work/detail/'+this.listid,
					method: 'get',
			
				}).then(res => {
					console.log(res.data);
					this.list=res.data
					this.list.studytime=this.timestampToTime(this.list.studytime)
					this.list.onetrial=this.timestampToTime(this.list.onetrial)
					this.list.twotrial=this.timestampToTime(this.list.twotrial)
					this.list.validitytime=this.timestampToTime(this.list.validitytime)
					this.list.delaytime=this.timestampToTime(this.list.delaytime)
					this.list.specialissuedate=this.timestampToTime(this.list.specialissuedate)
					this.list.mt_safe_accident_listList[0].accidenttime=this.timestampToTime(this.list.mt_safe_accident_listList[0].accidenttime)
					this.list.mt_safe_violation_listList[0].violationtime=this.timestampToTime(this.list.mt_safe_violation_listList[0].violationtime)
					console.log(JSON.parse(this.list.specialimage));
					this.list.specialimage='http://1.192.217.27:20000'+JSON.parse(this.list.specialimage)[0].url
				}).catch(() => {
					console.log('x');
				})
			},
			timestampToTime(timestamp) {
			       var  date = new Date(timestamp );//时间戳为10位需*1000，时间戳为13位的话不需乘1000
			       var Y = date.getFullYear() + '-';
			       var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
			       var D = date.getDate() + ' ';
			       return Y+M+D;
			   },
			handleClick(index, index1) {
				const item = this.list[index]
				request({
					url: '/api/example/Mt_safe_special_work/' + item.id,
					method: 'delete'
				}).then(res => {
					uni.showToast({
						title: res.msg,
						complete: () => {
							this.$u.toast(res.msg)
							this.list.splice(index, 1)
							if (!this.list.length) this.mescroll.showEmpty()
						}
					})
				})
			},
			open(index) {
				this.list[index].show = true;
				this.list.map((val, idx) => {
					if (index != idx) this.list[idx].show = false;
				})
			},
			search() {
				if (this.isPreview == '1') return
				this.searchTimer && clearTimeout(this.searchTimer)
				this.searchTimer = setTimeout(() => {
					this.list = [];
					this.mescroll.resetUpScroll();
				}, 300)
			},
			goDetail(id, status) {
				let btnType = ''
				let btnList = []
				btnList.push('btn_edit')
				btnList.push('btn_detail')
				if (btnList.includes('btn_detail')) {
					btnType = "btn_detail"
				}
				if (btnList.includes('btn_edit')) {
					btnType = "btn_edit"
				}
				if (!btnType) return
				this.jumPage(id, status, btnType)
			},
			addPage() {
				this.jumPage()
			},
			jumPage(id, status, btnType) {
				if (!id && !status) btnType = 'btn_add'
				uni.navigateTo({
					url: id ? './form?menuId=' + this.menuId + '&jurisdictionType=' + btnType + '&id=' + id :
						'./form?menuId=' + this.menuId + '&jurisdictionType=' + btnType
				})
			},
			cellClick(item) {
				if (this.sortValue === item.value) return
				this.listQuery.sort = item.sort
				this.listQuery.sidx = item.sidx
				this.sortValue = item.value
				this.$refs.uDropdown.close();
				this.$nextTick(() => {
					this.list = [];
					this.mescroll.resetUpScroll();
				})
			},
			reset() {
				this.$refs.searchForm.resetFields()
			},
			closeDropdown() {
				this.$refs.uDropdown.close();
				this.$nextTick(() => {
					this.list = [];
					this.mescroll.resetUpScroll();
				})
			},
			dataList(data) {
				let _list = []
				for (let i = 0; i < data.list.length; i++) {
					let _data = data.list[i]
					_list.push(_data)
				}
				return _list;
			},
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #f0f2f6;
		height: 100%;
		/* #ifdef MP-ALIPAY */
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;

		/* #endif */
		.certificate-img {
			width: calc(100% - 40rpx);
			margin: 20rpx auto 0rpx auto;
			background-color: #fff;
			border-radius: 18rpx;
			padding: 20rpx 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: flex-start;

			.left-text {
				h1 {
					font-size: 30rpx;
					font-weight: bold;
					color: #333333;
					margin-top: 10rpx;
					margin-bottom: 20rpx;
				}

				p {
					font-size: 14px;
					color: #797F85;
				}
			}

			.img {
				border-radius: 12rpx;
				// margin: 20rpx 0;
			}
		}

		.list-warp {
			.list {
				.list-box {
					border-radius: 16rpx;
					overflow: hidden;
					.item {
						.item-cell {
							display: flex;
							justify-content: space-between;
							align-items: center;
							border-bottom: 1px solid #F9F9F9;

							text {
								font-size: 30rpx;

								&:first-child {
									color: #333;
								}

								&:last-child {
									color: #797F85;
								}
							}
						}
					}
				}
				.people-histroy {
					width: 100%;
					margin: 0rpx auto 20rpx auto;
					background-color: #fff;
					border-radius: 18rpx;
					padding: 20rpx 30rpx  10rpx 30rpx;
					.accident,.illegal{
						.ac-item{
							background-color: #F8F8F8;
							border-radius: 16rpx;
							padding: 28rpx;
							margin-bottom: 20rpx;
							p{
								line-height: 1.5;
								text-align: justify;
								&.time{
									color: #a5a5a5;
									margin-top: 10rpx;
								}
							}
						}
					}
				}
			}
		}
	}
</style>
